import React, { Component } from 'react'
import { Route } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import '../../assets/fonts/iconfont.css'
import './index.css'
import Index from '../Index'
import News from '../News'
import Profile from '../Profile'
import HouseList from '../HouseList';

const tabBars = [
    { path: '/home', title: '首页', icon: 'icon-ind' },
    { path: '/home/houselist', title: '找房', icon: 'icon-findHouse' },
    { path: '/home/news', title: '资讯', icon: 'icon-infom' },
    { path: '/home/my', title: '我的', icon: 'icon-my' },
];
export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
        };
    }

    render() {
        return (
            <div className='home'>
                <Route path="/home" exact component={Index} />
                <Route path="/home/news" component={News} />
                <Route path="/home/my" component={Profile} />
                <Route path="/home/houselist" component={HouseList} />
                <div>
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        noRenderContent
                    >
                        {
                            tabBars.map((v, i) => (
                                <tabBars.Item
                                    title={v.title}
                                    key={v.path}
                                    icon={<i className={`iconfont ${v.icon}`}></i>}
                                    selectedIcon={<i className={`iconfont  ${v.icon}`}></i>}
                                    selected={this.props.location.pathname === v.path}
                                    onPress={() => {
                                        this.props.history.push(v.path);
                                    }}
                                />
                            ))
                        }
                    </TabBar>
                </div>
            </div >
        )
    }
}
